<!--
 * @Description: 
 * @Autor: xiukun@herry
 * @Date: 2021-01-28 15:06:08
 * @LastEditors: xiukun@herry
 * @LastEditTime: 2021-01-29 17:14:30
-->
<template>
    <div class="upload-container">
        <a-button icon="cloud-upload" size="small" type="primary" @click="dialogVisible = true">上传图片</a-button>
        <a-modal :visible.sync="dialogVisible" title="上传图片" @cancel="handleDialogCancel" @ok="handleDialogOk">
            <a-upload class="editor-slide-upload" list-type="picture-card" :multiple="true" :fileList="fileList" :action="upLoadImgUrl" @change="handleChange" @preview="handlePreview">
                <div v-if="fileList.length < 8">
                    <a-icon type="plus" />
                    <div class="ant-upload-text">点击上传</div>
                </div>
                <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                    <img alt="example" style="width: 100%" :src="previewImage" />
                </a-modal>
            </a-upload>
        </a-modal>
    </div>
</template>

<script>
function getBase64(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = (error) => reject(error);
    });
}
import Upload from 'ant-design-vue/es/upload';
export default {
    name: 'EditorSlideUpload',
    components: {
        AUpload: Upload,
    },
    data() {
        return {
            previewVisible: false,
            dialogVisible: false,
            previewImage: '',
            fileList: [
                // {
                //     uid: '-1',
                //     name: 'image.png',
                //     status: 'done',
                //     url:
                //         'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
                // },
            ],
            upLoadImgUrl: process.env.VUE_APP_BASE_API_UPLOAD,
        };
    },
    methods: {
        init() {
            this.fileList = [];
            this.imgList = {};
        },
        handleCancel() {
            this.previewVisible = false;
        },
        async handlePreview(file) {
            if (!file.url && !file.preview) {
                file.preview = await getBase64(file.originFileObj);
            }
            this.previewImage = file.url || file.preview;
            this.previewVisible = true;
        },
        handleChange({ fileList }) {
            this.fileList = fileList;
        },
        handleDialogCancel() {
            this.dialogVisible = false;
            this.init();
        },
        handleDialogOk() {
            this.dialogVisible = false;
            if (this.fileList.length > 0) {
                this.$emit('successCBK', this.fileList);
            }
            this.init();
        },
    },
};
</script>

<style lang="less" scoped></style>
